<template>
  <div class="newspaper-detail-container">
    <!-- 顶部导航栏 -->
    <div class="header">
      <div class="header-content">
        <button class="back-btn" @click="goBack">
          <span class="back-icon">←</span>
          返回展厅
        </button>
        <h1 class="page-title">人民日报 - 详细查看</h1>
        <div class="header-actions">
          <button class="action-btn" @click="toggleFullscreen">
            <span class="action-icon">⛶</span>
            全屏
          </button>
          <button class="action-btn" @click="downloadImage">
            <span class="action-icon">⬇</span>
            下载
          </button>
        </div>
      </div>
    </div>

    <!-- 报纸内容区域 -->
    <div class="newspaper-content" ref="newspaperContent">
      <!-- 报纸图片 -->
      <div class="newspaper-image-container" :class="{ 'fullscreen': isFullscreen }">
        <img 
          :src="newspaperImage" 
          alt="人民日报" 
          class="newspaper-image"
          @load="onImageLoad"
          @error="onImageError"
        />
        
        <!-- 加载状态 -->
        <div v-if="loading" class="loading-overlay">
          <div class="loading-spinner"></div>
          <p>正在加载报纸...</p>
        </div>

        <!-- 错误状态 -->
        <div v-if="error" class="error-overlay">
          <div class="error-icon">⚠</div>
          <p>图片加载失败</p>
          <button @click="retryLoad" class="retry-btn">重试</button>
        </div>
      </div>

      <!-- 报纸信息 -->
      <div class="newspaper-info">
        <div class="info-card">
          <h3>报纸信息</h3>
          <div class="info-item">
            <span class="info-label">标题：</span>
            <span class="info-value">人民日报</span>
          </div>
          <div class="info-item">
            <span class="info-label">日期：</span>
            <span class="info-value">{{ currentDate }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">版面：</span>
            <span class="info-value">第1版</span>
          </div>
          <div class="info-item">
            <span class="info-label">类型：</span>
            <span class="info-value">党报</span>
          </div>
        </div>

        <!-- 操作按钮 -->
        <div class="action-buttons">
          <button class="action-btn primary" @click="zoomIn">
            <span class="action-icon">🔍+</span>
            放大
          </button>
          <button class="action-btn primary" @click="zoomOut">
            <span class="action-icon">🔍-</span>
            缩小
          </button>
          <button class="action-btn" @click="resetZoom">
            <span class="action-icon">↺</span>
            重置
          </button>
        </div>
      </div>
    </div>

    <!-- 缩放控制提示 -->
    <div class="zoom-tip" v-if="showZoomTip">
      <p>💡 提示：您可以使用鼠标滚轮进行缩放，拖拽移动图片</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import bz1Image from '@/assets/bz1.jpg'

// 响应式数据
const router = useRouter()
const loading = ref(true)
const error = ref(false)
const isFullscreen = ref(false)
const showZoomTip = ref(true)
const newspaperContent = ref<HTMLDivElement>()

// 计算属性
const currentDate = computed(() => {
  const now = new Date()
  return now.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  })
})

const newspaperImage = bz1Image

// 方法
const goBack = () => {
  router.push('/')
}

const onImageLoad = () => {
  loading.value = false
  error.value = false
}

const onImageError = () => {
  loading.value = false
  error.value = true
}

const retryLoad = () => {
  loading.value = true
  error.value = false
  // 重新加载图片
  const img = new Image()
  img.onload = onImageLoad
  img.onerror = onImageError
  img.src = newspaperImage
}

const toggleFullscreen = () => {
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen()
    isFullscreen.value = true
  } else {
    document.exitFullscreen()
    isFullscreen.value = false
  }
}

const downloadImage = () => {
  const link = document.createElement('a')
  link.href = newspaperImage
  link.download = `人民日报_${currentDate.value}.jpg`
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
}

const zoomIn = () => {
  const container = newspaperContent.value
  if (container) {
    container.style.transform = 'scale(1.2)'
  }
}

const zoomOut = () => {
  const container = newspaperContent.value
  if (container) {
    container.style.transform = 'scale(0.8)'
  }
}

const resetZoom = () => {
  const container = newspaperContent.value
  if (container) {
    container.style.transform = 'scale(1)'
  }
}

// 生命周期
onMounted(() => {
  // 3秒后隐藏提示
  setTimeout(() => {
    showZoomTip.value = false
  }, 3000)
})
</script>

<style scoped>
.newspaper-detail-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  display: flex;
  flex-direction: column;
}

/* 顶部导航栏 */
.header {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.back-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: #2c3e50;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
  transition: all 0.3s ease;
}

.back-btn:hover {
  background: #34495e;
  transform: translateY(-2px);
}

.back-icon {
  font-size: 1.2rem;
}

.page-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #2c3e50;
  margin: 0;
}

.header-actions {
  display: flex;
  gap: 1rem;
}

.action-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: #ecf0f1;
  color: #2c3e50;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
  transition: all 0.3s ease;
}

.action-btn:hover {
  background: #bdc3c7;
  transform: translateY(-2px);
}

.action-btn.primary {
  background: #3498db;
  color: white;
}

.action-btn.primary:hover {
  background: #2980b9;
}

.action-icon {
  font-size: 1.1rem;
}

/* 报纸内容区域 */
.newspaper-content {
  flex: 1;
  display: flex;
  gap: 2rem;
  padding: 2rem;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  transition: transform 0.3s ease;
}

.newspaper-image-container {
  flex: 1;
  background: white;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  position: relative;
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.newspaper-image-container.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1000;
  border-radius: 0;
}

.newspaper-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  cursor: grab;
  transition: transform 0.3s ease;
}

.newspaper-image:active {
  cursor: grabbing;
}

/* 加载状态 */
.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 错误状态 */
.error-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.error-icon {
  font-size: 3rem;
  color: #e74c3c;
}

.retry-btn {
  padding: 0.75rem 1.5rem;
  background: #e74c3c;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
  transition: all 0.3s ease;
}

.retry-btn:hover {
  background: #c0392b;
}

/* 报纸信息 */
.newspaper-info {
  width: 300px;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.info-card {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.info-card h3 {
  margin: 0 0 1rem 0;
  color: #2c3e50;
  font-size: 1.2rem;
  font-weight: 600;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
  border-bottom: 1px solid #ecf0f1;
}

.info-item:last-child {
  border-bottom: none;
}

.info-label {
  color: #7f8c8d;
  font-weight: 500;
}

.info-value {
  color: #2c3e50;
  font-weight: 600;
}

.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* 缩放提示 */
.zoom-tip {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 1rem 2rem;
  border-radius: 25px;
  font-size: 0.9rem;
  animation: fadeInUp 0.5s ease;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .header-content {
    padding: 1rem;
    flex-direction: column;
    gap: 1rem;
  }

  .newspaper-content {
    flex-direction: column;
    padding: 1rem;
  }

  .newspaper-info {
    width: 100%;
  }

  .header-actions {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .back-btn,
  .action-btn {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
  }

  .page-title {
    font-size: 1.2rem;
  }
}
</style>

